<template>
  <div class="login">
    <h2>Xx-回信</h2>
    <div class="box">
      <nut-form ref="ruleForm" :model-value="formData">
        <nut-form-item required prop="username" :rules="[{ required: true, message: '请输入账号' }]">
          <input v-model="formData.username" class="nut-input-text" placeholder="请输入账号" type="text" />
        </nut-form-item>
        <nut-form-item required prop="password" :rules="[{ required: true, message: '请输入密码' }]">
          <input v-model="formData.password" class="nut-input-text" placeholder="请输入密码" type="password" />
        </nut-form-item>
        <br />
        <nut-button block type="info" @click="submit"> 登录 </nut-button>
        <div class="register" @click="goRegisterPage">注册账号？</div>
      </nut-form>
    </div>
  </div>
</template>

<script lang="ts" setup name="LoginPage">
  import router from '/@/router';
  import { reactive, ref } from 'vue';
  import { useUserStore } from '/@/store/modules/user';

  const userStore = useUserStore();
  const formData = reactive({
    username: '',
    password: '',
  });
  const ruleForm = ref<any>(null);
  const submit = () => {
    ruleForm.value.validate().then(async ({ valid, errors }: any) => {
      if (valid) {
        const userInfo = await userStore.login(formData);
        console.log(userInfo);
        if (userInfo) {
          router.push({ path: '/home' });
        }
      } else {
        console.log('error submit!!', errors);
      }
    });
  };
  const goRegisterPage = () => {
    router.push({ path: '/register' });
  };
</script>

<style scoped lang="scss">
  .login {
    padding: 20px;
    box-sizing: border-box;
    height: 100vh;
    color: #fff;
    background: url('https://img2.baidu.com/it/u=2151917160,2261808597&fm=253&fmt=auto&app=138&f=JPG?w=500&h=1000');

    ::v-deep(.nut-cell-group__warp) {
      background-color: transparent;
    }

    ::v-deep(.nut-form-item::before) {
      bottom: 12px;
    }

    h2 {
      text-align: center;
      letter-spacing: 10px;
    }

    .box {
      padding: 40px 60px;
      margin-top: 10%;

      .register {
        font-size: 24px;
        font-weight: bold;
        line-height: 4;
        padding-left: 12px;
        letter-spacing: 1px;
      }
    }

    .nut-form-item {
      background: #f2f3f5;
      border-radius: 20px;
      margin-bottom: 60px;

      input {
        background: transparent;
      }
    }
  }
</style>
